<#include "../common/header.htm">
<div class="content-wrapper">
    <section class="content" id="exportListForm">
            <div class="box">
                <div class="box-header">
                    <div class="row RowSearchWork">
                        <div class="col-sm-12">
                            <div class="form-inline">
                                <div class="form-group" >
                                    <label>姓名</label>
                                    <input name="accountBody" v-model="accountBody" type="text" class="form-control"  placeholder="请输入交易主体" style="display: inline-block;width: 180px;margin-left: 5px;" />
                                </div>
                                <div class="form-group" style="margin-left: 20px;">
                                    <label>交易账号</label>
                                    <input name="accountBodyNumber" v-model="accountBodyNumber" type="text" class="form-control"  placeholder="请输入交易账号" style="display: inline-block;width: 180px;margin-left: 5px;" />
                                </div>
                                <div class="form-group" style="margin-left: 20px;">
                                    <label>交易卡号</label>
                                    <input name="accountBodyCard" v-model="accountBodyCard"  type="text" class="form-control"  placeholder="请输入交易卡号" style="display: inline-block;width: 180px;margin-left: 5px;" />
                                </div>
                                <div class="form-group" style="margin-left: 20px;">
                                    <input type="button" class="btn btn-primary" @click="search()" value="查询" />
                                    <input type="button" class="btn btn-default" @click="clear()" value="重置" />
                                    <input type="button" class="btn btn-primary" onclick="datalog.billExport();" value="导出" />
                                    <input type="button" style="width: 80px;" class="btn btn-primary" onclick="datalog.billExport2();" value="原始导出" />
                                    <input type="button" style="width: 80px;" class="btn btn-primary btn-width" onclick="datalog.todataLog();" value="查看日志" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <el-table
                            row-class-name="tableRow"
                            ref="multipleTable"
                            border
                            :data="page.rows"
                            tooltip-effect="dark"
                           >
                        <el-table-column
                                width="60"
                                type="index"
                                label="序号">
                        </el-table-column>
                        <el-table-column
                                label="交易主体"
                                >
                            <template slot-scope="scope">
                                <span :title="scope.row.accountBody" class="overflow">{{ scope.row.accountBody }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="交易主体账号"
                                width="190">
                            <template slot-scope="scope">
                                <span :title="scope.row.accountBodyNumber" class="overflow">{{ scope.row.accountBodyNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="190"
                                label="交易主体卡号">
                            <template slot-scope="scope">
                                <span :title="scope.row.accountBodyCard" class="overflow">{{ scope.row.accountBodyCard }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="收付状态"
                               >
                            <template slot-scope="scope">
                                <span >{{ scope.row.sign | formatCaseType}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="190"
                                label="交易日期">
                            <template slot-scope="scope" v-if="scope.row.tradeDate">
                                <span >{{ scope.row.tradeDate | formatDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="accountRival"
                                label="交易对手">
                            <template slot-scope="scope">
                                <span :title="scope.row.accountRival" class="overflow">{{ scope.row.accountRival }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="190"
                                label="对手账号">
                            <template slot-scope="scope">
                                <span :title="scope.row.accountRivalNumber" class="overflow">{{ scope.row.accountRivalNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="190"
                                label="对手卡号">
                            <template slot-scope="scope">
                                <span :title="scope.row.accountRivalCard" class="overflow">{{ scope.row.accountRivalCard }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="accountMoney"
                                label="交易金额">
                            <template slot-scope="scope" v-if="scope.row.accountMoney">
                                <span >{{ scope.row.accountMoney | formatMoney  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="surplusMoney"
                                label="交易后余额">
                            <template slot-scope="scope" v-if="scope.row.surplusMoney">
                                <span >{{ scope.row.surplusMoney | formatMoney  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="摘要">
                            <template slot-scope="scope">
                                <span :title="scope.row.contentAbstract" class="overflow">{{ scope.row.contentAbstract }}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            :current-page.sync="currentPage"
                            :page-size="20"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            layout="total, prev, pager, next"
                            :total="page.total"
                            style="padding: 2px 20px;border-top:0;">
                    </el-pagination>
                </div>
    </div>
</section>
</div>
<div class="modal fade" id="loadingModal" aria-hidden=”true” data-backdrop=”static”>
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5 style="color:black"> <strong>正在下载Excel...请稍等！</strong> </h5>
    </div>
</div>
<script>
    var datalog = {
        query: function () {
            var accountBody = $("input[name='accountBody']").val().trim();
            var accountBodyNumber = $("input[name='accountBodyNumber']").val().trim();
            var accountBodyCard = $("input[name='accountBodyCard']").val().trim();
            var query="?";
            if(accountBody){
                query+="accountBody="+accountBody+"&"
            }
            if(accountBodyNumber){
                query+="accountBodyNumber="+accountBodyNumber+"&"
            }
            if(accountBodyCard){
                query+="accountBodyCard="+accountBodyCard+"&"
            }
            if(xx.uuid){
                query+="casemanageId="+xx.uuid+"&"
            }
            query=query.substr(0,query.length-1).trim();
            window.location.href="${ctx}/bill/export"+query
        },
        billExport: function () {
            var accountBody = $("input[name='accountBody']").val().trim();
            var accountBodyNumber = $("input[name='accountBodyNumber']").val().trim();
            var accountBodyCard = $("input[name='accountBodyCard']").val().trim();
            var query="?";
            if(accountBody){
                query+="accountBody="+accountBody+"&"
            }
            if(accountBodyNumber){
                query+="accountBodyNumber="+accountBodyNumber+"&"
            }
            if(accountBodyCard){
                query+="accountBodyCard="+accountBodyCard+"&"
            }
            query=query.substr(0,query.length-1).trim();
            $("#loadingModal").modal({backdrop: 'static', keyboard: false});
            loadDown(query);
        },
        billExport2: function () {
            var accountBody = $("input[name='accountBody']").val().trim();
            var accountBodyNumber = $("input[name='accountBodyNumber']").val().trim();
            var accountBodyCard = $("input[name='accountBodyCard']").val().trim();
            var query="?";
            if(accountBody){
                query+="accountBody="+accountBody+"&"
            }
            if(accountBodyNumber){
                query+="accountBodyNumber="+accountBodyNumber+"&"
            }
            if(accountBodyCard){
                query+="accountBodyCard="+accountBodyCard+"&"
            }
            query=query.substr(0,query.length-1).trim();
            $("#loadingModal").modal({backdrop: 'static', keyboard: false});
            loadDown2(query);
        },
        clear: function () {
            $("input[name='accountBody']").val("");
            $("input[name='accountBodyNumber']").val("");
            $("input[name='accountBodyCard']").val("");
            xx.uuid="";
        },
        todataLog: function () {
            window.location.href = "${ctx}/datalog/importlist";
        }
    }
    function loadDown(query) {
        var url = "${ctx}/bill/billExport"+query;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
        xhr.responseType = "blob";
        xhr.onload = function () {
            $('#loadingModal').modal('hide');
            if (this.status === 200) {
                var content = this.response;
                var aTag = document.createElement('a');
                var blob = new Blob([content]);
                var headerName = xhr.getResponseHeader("Content-disposition");
                var fileName = decodeURIComponent(headerName).substring(20);
                aTag.download = fileName;
                aTag.href = URL.createObjectURL(blob);
                aTag.click();
                URL.revokeObjectURL(blob);
            }
        };
        xhr.send()
    }
    function loadDown2(query) {
        var url = "${ctx}/bill/billExport3"+query;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
        xhr.responseType = "blob";
        xhr.onload = function () {
            $('#loadingModal').modal('hide');
            if (this.status === 200) {
                var content = this.response;
                var aTag = document.createElement('a');
                var blob = new Blob([content]);
                var headerName = xhr.getResponseHeader("Content-disposition");
                var fileName = decodeURIComponent(headerName).substring(20);
                aTag.download = fileName;
                aTag.href = URL.createObjectURL(blob);
                aTag.click();
                URL.revokeObjectURL(blob);
            }
        };
        xhr.send()
    }


var xx=new Vue({
    el: '#exportListForm',
    data:{
        uuidlist: [],
        uuid:"",
        page:"",
        currentPage:1,
        size:20,
        accountBodyCard:"",
        accountBody:"",
        accountBodyNumber:""
    },
    created:function () {
        this.getlist();
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        },
        formatCaseType(sign) {
            if(sign==1){
                return '支出';
            }else if(sign==0){
                return '收入';
            }else{
                return ""
            }
        },
        formatMoney(value) {
        	if(!value) return 0;
            if (Number.isInteger(value)) {
                return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
            } else {
                return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
            }
        },
    },
    methods:{
        getUuidList() {
            request({
                url: 'casemanage/uuid/',
                method: 'get'
            }).then(result=>{
                this.uuidlist=result.data.data;
                this.uuidlist.unshift({case_name:"请选择",case_uuid:""})
            })
        },
        handleSizeChange(val) {
            console.log("每页"+val+"条")
        },
        handleCurrentChange(val) {
            console.log("当前页："+val)
            this.currentPage=val;
            this.getlist()
        },
        search(){
            this.getlist();
        },
        clear(){
            this.accountBody="";
            this.accountBodyNumber="";
            this.accountBodyCard="";
            this.uuid="";
        },
        getlist(){
            request({
                url: 'bill/search/'+this.currentPage+'/'+this.size,
                method: 'post',
                data: {
                    'accountBody':this.accountBody.trim(),
                    'accountBodyNumber':this.accountBodyNumber.trim(),
                    'accountBodyCard':this.accountBodyCard.trim()
                }
            }).then(result=>{
                console.log(result.data.data)
                this.page=result.data.data;
            })
        },
    }
})
    /*window.onload=function(){
        buildTable($('#exampleTableLargeColumns'), 10, 10);
        function buildTable($el, cells, rows) {
            var i, j, row,
                columns = [],
                data = [];

            for (i = 0; i < cells; i++) {
                columns.push({
                    field: '字段' + i,
                    title: '单元' + i
                });
            }
            for (i = 0; i < rows; i++) {
                row = {};
                for (j = 0; j < cells; j++) {
                    row['字段' + j] = 'Row-' + i + '-' + j;
                }
                data.push(row);
            }
            console.log(columns)
            console.log(data)
            $el.bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: data,
                iconSize: 'outline',
                icons: {
                    columns: 'glyphicon-list'
                }
            });
        }
    }*/
</script>
<style>
    .box-header .row label{
        margin-right: 5px;
        color: #6f7689;
        font-size: 13px;
        font-weight: 400;
    }
    .form-control{
        font-size: 12PX;
        border-color: #e4e4e4;
    }
    input.btn.btn-default {
        margin-right: 10px;
        width: 70px;
    }
    input.btn.btn-primary {
        width: 70px;
        margin-right: 10px;
    }
    .form-inline .form-group{
        vertical-align: top;
    }
    .form-inline .form-control{
        vertical-align: top;
    }
    .ml10{
        margin-left: 0px;
    }
    .btn-primary:active:focus{
        background-color: #4695ed;
        border-color: #4695ed;
    }
    .btn-primary{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background-color:#61a8f5;
        border-color:#61a8f5;
    }
    .btn-primary.focus, .btn-primary:focus{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .form-control{
        border-radius:4px;
    }
    .input-group .form-control:first-child{
        border-top-right-radius:4px;
        border-bottom-right-radius: 4px;
    }
    .form-control:focus{
        border-color:#4695ed;
    }
    .form-control:hover{
        border-color:#4695ed;
    }
    .box-header{
        color: #6f7689;
        margin-top: 10px;
        margin-bottom: 25px;
    }
    .bootstrap-table button{
        color: #444;
        background: #c7c7c7;
    }
</style>
<#include "../common/footer.htm">